﻿@page "/"
@page "/en"

<h3>BarcodeReader</h3>

<h5>1D/2D barcode, QR code, Pdf417</h5>

<button class="btn btn-primary"
        type="button"
        @onclick="(() => ShowScanBarcode = !ShowScanBarcode)">
    Scan
</button>

<br />
<input type="checkbox" @bind-value="Pdf417" />
Pdf417 Only
<br />

<input type="checkbox" @bind-value="DecodeContinuously" />
Decode continuously
<br />

<input type="checkbox" @bind-value="DecodeAllFormats" />
Decodde all formats (+ PDF_417 / DATA_MATRIX...)
<br />

@if (Pdf417 | DecodeAllFormats)
{
    <b>Result:</b>
    <br />
    <pre>@BarCode</pre>
}
else if (DecodeContinuously)
{
    <b>DecodeContinuously:</b>
    <br />
    <pre>@BarCode</pre>
}
else
{
    <input type="text" class="form-control" style="min-width: 100px;"
           @bind-value="BarCode"
           placeholder="BarCode" />
}

@if (ShowScanBarcode)
{

    <BarcodeReader ScanResult="ScanResult" 
                   Close="(()=>ShowScanBarcode=!ShowScanBarcode)"
                   ScanBtnTitle="Scan"
                   ResetBtnTitle="Reset"
                   CloseBtnTitle="Close"
                   Pdf417Only="Pdf417"
                   Decodeonce="!DecodeContinuously"
                   DecodeAllFormats="DecodeAllFormats"
                   SelectDeviceBtnTitle="Select Device" />

}
<hr />
<button class="btn btn-sm btn-outline-secondary"
        type="button"
        @onclick="(() => ShowCodes = !ShowCodes)">
    Code
</button>

@if (ShowCodes)
{
<pre>
    <code>
        @@if (ShowScanBarcode)
        {

            &lt;BarcodeReader ScanResult="((e) => { BarCode=e; ShowScanBarcode = !ShowScanBarcode; })"
                           Close="(()=>ShowScanBarcode=!ShowScanBarcode)"
                           OnError="OnError" /&gt;
            @@code{
                bool ShowScanBarcode { get; set; } = false;

                public string? BarCode { get; set; }

                private string message;

                private Task OnError(string message)
                {
                    this.message = message;
                    StateHasChanged();
                    return Task.CompletedTask;
                }

            }
        }
    </code>
</pre>
}
<hr />

<button class="btn btn-primary"
        type="button"
        @onclick="(() => ShowScanBarcodeCustom = !ShowScanBarcodeCustom)">
    Scan code [customize]
</button>
<br />
<input type="text" class="form-control" style="min-width: 100px;"
       @bind-value="BarCodeCustom"
       placeholder="条码" />
@if (ShowScanBarcodeCustom)
{
    <BarcodeReader ScanResult="((e) => { BarCodeCustom=e; ShowScanBarcodeCustom = !ShowScanBarcodeCustom; })"
                   Close="(()=>ShowScanBarcodeCustom=!ShowScanBarcodeCustom)"
                   OnError="OnError"
                   UseBuiltinDiv="false"
                   @ref="barcodeReaderCustom" />

    <div @ref="barcodeReaderCustom.Element">
        <div style="width: 480px; max-width: 100%">
            <button class="btn btn-outline-success p-2 m-1 w-20" data-action="startButton">Scan</button>
            <button class="btn btn-outline-success p-2 m-1 w-20" data-action="resetButton">Reset</button>
            <button class="btn btn-outline-success p-2 m-1 w-20" @onclick="(async ()=>await barcodeReaderCustom.Reload())">Reload</button>
            <button type="button" class="btn btn-outline-success p-2 m-1 w-20" data-action="closeButton">Close</button>

            <div data-action="sourceSelectPanel" style="display:none">
                <label for="sourceSelect">SelectDevice:</label><span class="text-dark" data-action="result"></span>
                <select data-action="sourceSelect" style="max-width:100%" class="form-control">
                </select>
            </div>
            <div>
                <video id="video" playsinline autoplay style="height:480px;width: 640px;border: 1px solid red"></video>
            </div>
        </div>
    </div>


}
<p>@message</p>
<br />
<br />
<br />
<br />
<div class="table-attr d-none d-md-block">

    <h4>Events</h4>

    <div class="table-container">

        <div class="table-wrapper">
            <table class="table is-single table-demo">
                <tbody>
                    <tr>
                        <td><div class="table-cell">ScanResult</div></td>
                        <td><div class="table-cell">Scan result callback method</div></td>
                        <td><div class="table-cell">EventCallback&lt;string&gt;</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">Close</div></td>
                        <td><div class="table-cell">Close scan code callback method</div></td>
                        <td><div class="table-cell">EventCallback</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">ScanBtnTitle</div></td>
                        <td><div class="table-cell">Scan button title</div></td>
                        <td><div class="table-cell">Parameter</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">ResetBtnTitle</div></td>
                        <td><div class="table-cell">Reset button title</div></td>
                        <td><div class="table-cell">Parameter</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">CloseBtnTitle</div></td>
                        <td><div class="table-cell">Close button title</div></td>
                        <td><div class="table-cell">Parameter</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">Pdf417</div></td>
                        <td><div class="table-cell">decode only Pdf417 format</div></td>
                        <td><div class="table-cell">Parameter</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">Decodeonce</div></td>
                        <td><div class="table-cell">Decode Once or Decode Continuously, default is Once</div></td>
                        <td><div class="table-cell">Parameter</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">DecodeAllFormats</div></td>
                        <td><div class="table-cell">Decodde All Formats, performance is poor, you can set options.formats to customize specify the encoding formats. The default is false</div></td>
                        <td><div class="table-cell">Parameter</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">options</div></td>
                        <td><div class="table-cell">ZXingOptions: Pdf417 | Decodeonce | TimeBetweenDecodingAttempts | DecodeAllFormats | formats</div></td>
                        <td><div class="table-cell">Parameter</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">SelectDeviceBtnTitle</div></td>
                        <td><div class="table-cell">Select device button title</div></td>
                        <td><div class="table-cell">Parameter</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">OnError</div></td>
                        <td><div class="table-cell">Error callback method</div></td>
                        <td><div class="table-cell">Func&lt;string, Task&gt;</div></td>
                    </tr>
                    <tr>
                        <td><div class="table-cell">UseBuiltinDiv</div></td>
                        <td><div class="table-cell">Use builtin interface,defallt True</div></td>
                        <td><div class="table-cell">bool</div></td>
                    </tr>
                </tbody>
                <thead>
                    <tr>
                        <th><div class="table-cell"><span class="table-text">Parameter</span></div></th>
                        <th><div class="table-cell"><span class="table-text">Description</span></div></th>
                        <th><div class="table-cell"><span class="table-text">Type</span></div></th>
                    </tr>
                </thead>
            </table>
        </div>

    </div>
</div>

<br />

<div class="table-attr d-none d-md-block table-container">

    <h4>BarcodeFormat</h4>

    <table class="table is-single table-demo">
        <thead>
            <tr>
                <th>1D product</th>
                <th>1D industrial</th>
                <th>2D</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>UPC-A</td>
                <td>Code 39</td>
                <td>QR Code</td>
            </tr>
            <tr>
                <td>UPC-E</td>
                <td><del>Code 93</del></td>
                <td>Data Matrix</td>
            </tr>
            <tr>
                <td>EAN-8</td>
                <td>Code 128</td>
                <td>Aztec</td>
            </tr>
            <tr>
                <td>EAN-13</td>
                <td><del>Codabar</del></td>
                <td>PDF 417</td>
            </tr>
            <tr>
                <td></td>
                <td>ITF</td>
                <td><del>MaxiCode</del></td>
            </tr>
            <tr>
                <td></td>
                <td>RSS-14</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><del>RSS-Expanded</del> *</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

<h6 style="color:lightskyblue;">@ver</h6>
<h6 style="color:lightskyblue;">@build</h6>

@code{

    /// <summary>
    /// Display the scan code interface
    /// </summary>
    bool ShowScanBarcode { get; set; } = false;

    /// <summary>
    /// BarCode
    /// </summary>
    public string? BarCode { get; set; }

    public bool Pdf417 { get; set; }
    public bool DecodeContinuously { get; set; }
    public bool DecodeAllFormats { get; set; }

    private string message;

    private Task OnError(string message)
    {
        this.message = message;
        StateHasChanged();
        return Task.CompletedTask;
    }

    bool ShowCodes;

    private void ScanResult(string e)
    {
        if (!DecodeContinuously)
        {
            BarCode = e;
            ShowScanBarcode = !ShowScanBarcode;
        }
        else
        {
            if (BarCode.Length >60) BarCode = "";
            BarCode += e + Environment.NewLine;
        }
    }

    #region Custom

    /// <summary>
    /// Display the Custom scan code interface
    /// </summary>
    bool ShowScanBarcodeCustom { get; set; } = false;

    /// <summary>
    /// BarCodeCustom
    /// </summary>
    public string? BarCodeCustom { get; set; }

    BarcodeReader barcodeReaderCustom;

    #endregion


    string? ver { get; set; }
    string? build { get; set; }


    Version? version { get; set; } = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        ver = $"Ver {version?.Major}.{version?.Minor}.{version?.Build}";
        build = "Build:" + File.GetLastWriteTime(Path.Combine(Directory.GetCurrentDirectory(), "Demo.Server.dll")).ToLocalTime().ToString("yyyy-MM-dd HH:mm");

    }
     
}
